<template>
  <el-form
      ref="ruleForm"
      :model="formState"
      :rules="rules"
      label-width="0"
      status-icon
      class="login-ruleForm"
  >
    <el-form-item prop="account">
      <el-input
          ref="account"
          v-model="formState.account"
          name="account"
          placeholder="请输入账号"
          :clearable="true"
          tabindex="1"
          type="text"
          maxlength="100"
          autocomplete="off"
      />
    </el-form-item>

    <el-form-item prop="password" class="">
      <el-input
          ref="password"
          v-model="formState.password"
          show-password
          name="password"
          placeholder="请输入密码"
          :clearable="true"
          tabindex="2"
          maxlength="16"
          type="password"
          autocomplete="off"
          @keyup.enter="loginHandle"
      />
    </el-form-item>

    <el-form-item v-if="showCaptcha" prop="captcha" class="">
      <div style="position: relative">
        <div class="code-inp">
          <el-input
              ref="captcha"
              v-model="formState.captcha"
              type="text"
              name="captcha"
              placeholder="请输入校验码"
              :clearable="true"
              tabindex="3"
              maxlength="6"
              autocomplete="off"
              @keyup.enter="loginHandle"
          />
        </div>
        <div class="code">
          <img :src="captchaImg" alt="" @click="updateImage"/>
        </div>
      </div>
    </el-form-item>

    <el-form-item class="h40" style="margin-bottom: 0">
      <el-button
          :loading="loading"
          :disabled="disabledLogin"
          type="primary"
          class="h40"
          style="width: 100%"
          @click.prevent="loginHandle"
      >
        登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {ref, reactive, computed} from "vue";
import {useRouter, useRoute} from "vue-router";
import {useUserStore} from "@/store/user.js"

const router = useRouter();
const route = useRoute();
const user = useUserStore();
const ruleForm = ref();
const trigger = ['blur', 'change'];

const formState = reactive({
  captcha: '',
  account: '',
  password: ''
})

const rules = {
  account: [{required: true, message: '请输入账号', trigger}],
  password: [{required: true, message: '请输入密码', trigger}],
  captcha: [{required: true, message: '请输入校验码', trigger}]
}
const showCaptcha = ref(false)
const captchaImg = ref('')
const captchaId = ref('')
const loading = ref(false)

const disabledLogin = computed(() => {
  const {captcha, account, password} = formState
  if (showCaptcha.value) {
    return !captcha || !account || !password
  } else {
    return !account || !password
  }
})

// 更新验证码
function updateImage() {

}

function loginHandle() {
  loading.value = true
  ruleForm.value.validate(async (valid) => {
    if (valid) {
      const params = {
        username: formState.account,
        password: formState.password
      }
      if (showCaptcha.value) {
        params.captchaId = captchaId.value
        params.captchaValue = formState.captcha
      }
      user.login(params).then(() => {
        router.push('/')
      }).catch(() => {
        loading.value = false
        if (showCaptcha.value) {
          updateImage()
        }
      })
    }
  })
}

</script>

<style lang="scss" scoped>
img {
  display: inline-block;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/*验证码*/
.code-inp {
  width: calc(100% - 125px);
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
}

.code {
  display: inline-block;
  height: 40px;
  width: 110px;
  cursor: pointer;
  vertical-align: middle;

  &:hover {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>